<template>
  <div class="max-w-7xl mx-auto px-4 py-8">
    <!-- 顶部操作栏 -->
    <div class="flex justify-between items-center mb-8">
      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">博客文章</h1>
      <NuxtLink
        to="/blog/edit/new"
        class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 flex items-center"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5 mr-2"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
            clip-rule="evenodd"
          />
        </svg>
        发布文章
      </NuxtLink>
    </div>

    <!-- 文章列表 -->
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <article
        v-for="post in posts"
        :key="post.path"
        class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden border border-gray-100 dark:border-gray-700"
      >
        <NuxtLink :to="post.path" class="block p-6">
          <h2 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">
            {{ post.title }}
          </h2>
          <p class="text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
            {{ post.description }}
          </p>
          <div class="flex items-center text-sm text-gray-500">
            <time :datetime="post.date">
              {{ new Date(post.date).toLocaleDateString("zh-CN") }}
            </time>
          </div>
        </NuxtLink>
      </article>
    </div>

    <!-- 无文章时显示 -->
    <div v-if="!posts?.length" class="text-center py-12">
      <p class="text-gray-600 dark:text-gray-400">暂无博客文章</p>
    </div>
  </div>
</template>

<script setup>
const { data: posts } = await useAsyncData("blog-posts", () => {
  return queryCollection("blog").all();
});

function formatDate(date) {
  return new Date(date).toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
}
</script>

<style>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
